<template>
    <div class="home-recommend">
        <h3 style="text-align: left;margin-left: 0.8rem;">达人歌单</h3>
      <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
            <li @click="selectItem(item)" v-for="(item,index) in listData" :key="index">
                <div class="cover">
                    <van-image :src="item.cover" radius="10" lazy-load/>
                    <span>▶{{ item.listen_num | numFilter(1) }}万</span>
                </div>
                <span>{{ item.title }}</span>
            </li>
        </ul>
      </div>
    </div>
</template>

<script>
// import BScroll from 'better-scroll';
import { betterScrollHorizontal } from '../../common/betterScroll.js';
    export default{
        data(){
           return{
             listData:[]
            }
        },
        created(){
            this.getSongListData();
        },
        methods:{
            getSongListData(){
                this.$request('get','/recommend/playlist/u')
                .then(res =>{
                    console.log(res)
                    if(res.result == 100){
                       this.listData = res.data.list
                    }
                    // this.betterScrollHorizontal(this.listData.length,10);
                    betterScrollHorizontal(this,this.$refs.wrapper,this.$refs.content,this.listData.length,10)
                    })
                },
                //列表项的单击事件
            selectItem(item){
               const id =  item.content_id; //获取歌单的id
               //1.编程式导航、字符串路径的方式
            //    this.$router.push(`/songlist/${id}`);

               //2、带有路径对象的方式
            //    this.$router.push({path:`/songlist/${id}`})

               this.$router.push({
                name: 'songlist',
                params:{
                    id //等同于id: id 
                }
               })
                } 
               //3、命名路由的方式
   
            //封装横向滚动的方法
            /**
             * 
             * @param {*} num:列表项的个数 
             * @param {*} itemWidth:列表项的宽度,单位是rem
             */
        //     betterScrollHorizontal(num,itemWidth){
        //         //计算内容区的宽度,动态设置
        //         this.$refs.content.style.width = num * itemWidth + "rem";
        //         this.$nextTick(()=>{
        //                 this.scroll= new BScroll(this.$refs.wrapper,{
        //                     scrollX: true, //开启横向滚动
        //                     scrollY: false, //关闭纵向滚动
        //                     startX: 0,

        //                 });
        //     });
        // },
    },
    // filters:{
    //     //处理播放量的显示格式(万和小数点)
    //     numFilter(value,num){
    //     return parseFloat(value/10000).toFixed(num)
    //     }
    // }
}
</script>

<style scoped>
    /* .home-recommend>ul{
        display: flex;
        flex-wrap: wrap;
        }
        .home-recommend ul>li{
            width: calc((100% - 1rem) / 3 * 1);
        }
        .home-recommend ul>li:nth-of-type(3n+2){
            margin-left: 0.5rem;
            margin-right: 0.5rem;
        }
        .cover{
            position: relative;
        }
        .cover>span{
            position: absolute;
            right: 0;
            bottom: 0.4rem;
            background-color: white;
        } */
        .wrapper{
            width: 100%;
            overflow: hidden;
        }
        ul.content{
            /* width: calc(12 * 10rem); */
        }
        ul.content li{
            width: 10rem;
            display: inline-block;
            vertical-align: top;
        }
        ul.content li *{
            margin: 0 0.1rem;
        }
        ul.content li>span{
            font-size: 0.8rem;
            color:cadetblue;
        }
        .cover{
            position: relative;
        }
        .cover>span{
            position: absolute;
            right: 0;
            bottom: 0.4rem;
            background-color: #a6a0a0;
            color: white;
            border-radius: 1rem;
            width: 6rem;

        } 
</style>